<template>
  <div style="width: 100%; height: 100%"></div>
</template>

<script>
import {
  Scene,
  PerspectiveCamera,
  WebGLRenderer,
  PlaneGeometry,
  Geometry,
  Mesh,
  MeshLambertMaterial,
  MeshBasicMaterial,
  SpotLight,
  Vector3,
  Face3
} from 'three'
import Detector from 'three/examples/js/Detector'
import { createMultiMaterialObject } from '../js/SceneUtils'
export default {
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      ele: null,
      width: 0,
      height:0
    }
  },
  mounted() {
    this.ele = this.$el
    this.width = this.$el.clientWidth
    this.height = this.$el.clientHeight

    if (!Detector.webgl) {
      const warning = Detector.getWebGLErrorMessage()
      this.ele.appendChild(warning)
    }
    this.threeStart()
  },
  methods: {
    initThree () {
      this.renderer = new WebGLRenderer({
        antialias : true // 是否弱化锯齿特性，true表示弱化，更消耗cpu
      })
      this.renderer.setSize(this.width, this.height)
      this.ele.appendChild(this.renderer.domElement)
      this.renderer.setClearColor(0xEEEEEE, 1.0)
      this.renderer.shadowMapEnabled = true
    },
    initCamera () {
      this.camera = new PerspectiveCamera(45, this.width / this.height, 0.1, 1000)
      this.camera.position.x = -20
      this.camera.position.y = 25
      this.camera.position.z = 20
      this.camera.lookAt(5, 0, 0)
    },
    initScene () {
      this.scene = new Scene()
    },
    initPlane () {
      const planeGeometry = new PlaneGeometry(60, 40, 1, 1)
      const planeMaterial = new MeshLambertMaterial({ color: '#ffffff' })
      const plane = new Mesh(planeGeometry, planeMaterial)
      plane.receiveShadow = true
      plane.rotation.x = -0.5 * Math.PI
      plane.position.x = 0
      plane.position.y = 0
      plane.position.z = 0
      this.scene.add(plane)
    },
    initLight () {
      const spotLight = new SpotLight(0xffffff)
      spotLight.position.set(-40, 60, 10)
      spotLight.castShadow = true
      this.scene.add(spotLight)
    },
    addGeometry () {
      const vertices = [
        new Vector3(1, 3, 1),
        new Vector3(1, 3, -1),
        new Vector3(1, -1, 1),
        new Vector3(1, -1, -1),
        new Vector3(-1, 3, -1),
        new Vector3(-1, 3, 1),
        new Vector3(-1, -1, -1),
        new Vector3(-1, -1, 1)
      ]
      const faces = [
        new Face3(0, 2, 1),
        new Face3(2, 3, 1),
        new Face3(4, 6, 5),
        new Face3(6, 7, 5),
        new Face3(4, 5, 1),
        new Face3(5, 0, 1),
        new Face3(7, 6, 2),
        new Face3(6, 3, 2),
        new Face3(5, 7, 0),
        new Face3(7, 2, 0),
        new Face3(1, 3, 4),
        new Face3(3, 6, 4)
      ]
      const geom = new Geometry()
      geom.vertices = vertices
      geom.faces = faces
      geom.computeFaceNormals()
      const materials = [
        new MeshLambertMaterial({opacity: 0.6, color: 0x44ff44, transparent: true}),
        new MeshBasicMaterial({color: 0x000000, wireframe: true})
      ]
      const mesh = createMultiMaterialObject(geom, materials)
      this.scene.add(mesh)
    },
    threeStart () {
      this.initThree()
      this.initCamera()
      this.initScene()
      this.initPlane()
      this.initLight()
      this.addGeometry()
      this.renderer.render(this.scene, this.camera)
    }
  }
}
</script>
